<template>
	<view class="deep">
		<!-- 搜索 -->
		<view class=" bg-white d-flex j-center a-center">
			<view class="bg-light-secondary span-18 rounded-50 d-flex py-1 ">
				<u-icon   name="search" color="#888888" size="33" class="mx-2"></u-icon>
				<input class="" type="text" placeholder="搜索商品名称" @click="sendSeach" focus disabled="true"  />
			</view>
		</view>
		<!-- 头部 -->
		<view class="bg-white sale_header" >
			<u-tabs-swiper ref="uTabs" active-color="#ff0000" bar-width="80" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
						 swiperWidth="750"></u-tabs-swiper>
		</view>
		
		
		<view class="mt-5" v-if="u_loadmore">
			<u-loadmore status="loading" icon-type="circle" />
		</view>
		<view v-else>
			<!-- 内容 -->
			<swiper :style="{'height':scrollHeight}"  :current="swiperCurrent" duration="600"  @transition="transition" @animationfinish="animationfinish">
				<swiper-item>
					<scroll-view scroll-y="true" :style="{'height':scrollHeight}" @scrolltolower="scrolltolower" refresher-enabled="true" :refresher-triggered="triggered" :refresher-threshold="100" @refresherpulling="onPulling"
            @refresherrefresh="onRefresh" @refresherrestore="onRestore">
						<sale :saleList="saleList" @goodsOpen="goodsOpen" @goodsDetail="goodsDetail" :total="total"></sale>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view scroll-y="true" :style="{'height':scrollHeight}">
						<under :underList="underList" @goods_under="goods_under" @goodsDetail="goodsDetail"></under>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view scroll-y="true" :style="{'height':scrollHeight}">
						<audit :auditList="auditList" @goods_audit="goods_audit" @goodsDetail="goodsDetail"></audit>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view scroll-y="true" :style="{'height':scrollHeight}">
						<shelve :shelveList="shelveList" @goods_shelve="goods_shelve" @goodsDetail="goodsDetail"></shelve>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 改价 -->
		<u-popup @open="open_focus" @close="close_focus" v-model="mouseShow" negative-top="200" width="90%" mode="center" border-radius="14" closeable="true" close-icon="close" close-icon-pos="top-right" close-icon-size="40">
			<view class="py-2 border-bottom">
				<view class="font-md d-flex j-center a-center">快速改价</view>
			</view>
			<view class="d-flex font-md">
				<view class="goods_card_head_left position-relative m-2">
					<view v-if="items.has_product=='yes'" class="text-white goods_logo">多货品</view>
					<image class="popupImg" :src="items.img.url?items.img.url:defaltImage" mode=""></image>
				</view>
				<view class="p-3">
					<view class="font-md">现&nbsp;&nbsp;&nbsp;价:&nbsp;<text class="text-danger ml-1 font-md">{{items.shop_price}}</text></view>
					<view class="d-flex pt-3">
						<view class="font-md nowrap">调整至:</view>
						<view class="d-flex bg-light-secondary py-1 rounded-10 font-md ml-2"><input type="digit"  focus :focus="firstFocus" @focus="change_input" class="text-center" placeholder-class="text-center" v-model="changePrice" @input="changeInput" /></view>
					</view>
				</view>	
			</view>
			<button type="warn" class="pupup" @click="ConfirmPrice">确认</button>
			<view class="text-center text-primary py-3" @click="expert">高级改价</view>	
		</u-popup>
		<!--下架 -->
		<u-modal v-model="downShow" title="下架提示" show-title="false"  show-confirm-button show-cancel-button cancel-color confirm-color @confirm="downFarme">
			<view class="py-3">
				<view class="text-center">你确定要把该商品下架吗?</view>
			</view>
		</u-modal>
		<!-- 智能权重 -->
		<u-popup v-model="weightShow" width="90%" mode="center" border-radius="14" closeable="true" close-icon="close" close-icon-pos="top-right" close-icon-size="40">
				<view class="py-2 border-bottom">
					<view class="font-lg d-flex j-center a-center">智能权重</view>
				</view>
				<view class="bg-light-secondary pb-2">
					<view class="border-bottom  d-flex pl-2">
						<view class="border-right span-10 py-1">商品购买数量</view><view class="text-center span-10 py-1">0</view>
					</view>
					<view class="border-bottom d-flex pl-2">
						<view class="border-right span-10 py-1">商品退换数量</view><view class="text-center span-10 py-1">{{weightList.return_number!==false?'0':weightList.return_number}}</view>
					</view>
					<view class="border-bottom d-flex pl-2">
						<view class="border-right span-10 py-1">购买此商品的会员数量</view><view class="text-center span-10 py-1">{{weightList.user_number!==false?'0':weightList.user_number}}</view>
					</view>
					<view class="border-bottom d-flex pl-2">
						<view class="border-right span-10 py-1">对此商品评价数量</view><view class="text-center span-10 py-1">{{weightList.goods_comment_number!==false?'0':weightList.goods_comment_number}}</view>
					</view>
					<view class="border-bottom d-flex pl-2">
						<view class="border-right span-10 py-1">对此商品商家评价数量</view><view class="text-center span-10 py-1">{{weightList.merchants_comment_number!==false?'0':weightList.merchants_comment_number}}</view>
					</view>
					<view class="border-bottom d-flex pl-2">
						<view class="border-right span-10 py-1">会员关注此商品数量</view><view class="text-center span-10 py-1">{{weightList.user_attention_number!==false?'0':weightList.user_attention_number}}</view>
					</view>
					<view class="border-bottom d-flex pl-2">
						<view class="border-right span-10 py-1">人工干预值</view><view class="text-center span-10 py-1"><input value="interfere" type="text" v-model="interfere" @input="interfereInput" @confirm="weight" /></view>
					</view>
				</view>
			</u-popup>
		<!-- 更多 -->
		<s-popup custom-class="demo-popup" position="bottom" v-model="moreShow">
			<!-- 内容 -->
			<view class="d-flex j-center a-center">
				<view class="content span-19 rounded-20 mx-2">
					<!-- <view class="py-3 border-bottom text-center" @click="share">分享</view> -->
					<view class="py-3 border-bottom text-center" @click="goods_recycle">移至回收站</view>
					<view class="py-3 border-bottom d-flex j-center a-center" @click="is_new">
							<image class="goods_icon" v-if="items.is_new" :src="[items.is_new?'../../static/images/goods/icon_goods_new.png':'']" mode="widthFix"></image>
							<view class="ml-1">{{[items.is_new?"取消":"设置"]}}新品</view>
					</view>
					<view class="py-3 border-bottom d-flex j-center a-center" @click="is_hot">
							<image class="goods_icon" v-if="items.is_hot" :src="[items.is_hot?'../../static/images/goods/icon_goods_hot.png':'']" mode="widthFix"></image>
							<view class="ml-1">{{[items.is_hot?"取消":"设置"]}}热销</view>
					</view>
					<view class="py-3 border-bottom d-flex j-center a-center" @click="is_best">
							<image class="goods_icon" v-if="items.is_best"  :src="[items.is_best?'../../static/images/goods/icon_goods_best.png':'']" mode="widthFix"></image>
							<view class="ml-1">{{[items.is_best?"取消":"设置"]}}精品</view>
					</view>
				</view>
			</view>
			<view class="d-flex j-center a-center span-19 py-3 bg-white mx-2 my-2 rounded-25 " @click="cancelMore">
				取消
			</view>
		</s-popup>
		<!-- 商品移至回收站 -->
		<u-modal v-model="delShow" title="提示" show-title="false"  show-confirm-button show-cancel-button cancel-color confirm-color @confirm="confirm_delShow">			<view class="py-3">				<view class="text-center">你确定要将商品移至回收站吗？</view>			</view>		</u-modal>
		<!-- 分享 -->
		<s-popup custom-class="demo-popup" position="bottom" v-model="shareShow">
			<!-- 内容 -->
			<view class="m-2 bg-white rounded-20 icon_share py-2">
				<view class="border-bottom d-flex ml-4 py-4">
					<view class="text-center">
						<image  src="../../static/images/goods/icon_share_wechat_timeline.png" mode=""></image>
						<view class="">朋友圈</view>
					</view>
					<view class="text-center ml-3">
						<image src="../../static/images/goods/icon_share_wechat.png" mode=""></image>
						<view class="">微信</view>
					</view>
					<view class="text-center ml-3" @click="toShireqq">
						<image src="../../static/images/goods/icon_share_qq.png" mode=""></image>
						<view class="">QQ</view>
					</view>
				</view>
				<view class="d-flex ml-4 py-4">
					<view class="text-center">
						<image src="../../static/images/goods/icon_share_clipboard.png" mode=""></image>
						<view class="">复制链接</view>
					</view>
					<view class="text-center ml-3">
						<image src="../../static/images/goods/icon_share_qrcode.png" mode=""></image>
						<view class="">二维码</view>
					</view>
				</view>
			</view>
			<view class="d-flex j-center a-center span-19 py-3 bg-white mx-2 my-1 rounded-25" @click="cancelShare">
				取消
			</view>
		</s-popup>
		<!-- 新品 -->
		<u-modal v-model="is_newShow" title="提示" show-title="false"  show-confirm-button show-cancel-button cancel-color confirm-color @confirm="confirm_is_new">
			<view class="py-3">
				<view class="text-center">你确定要把选中的商品{{items.is_new?'取消':'设置'}}新品吗?</view>
			</view>
		</u-modal>
		<!-- 热销 -->
		<u-modal v-model="is_hotShow" title="提示" show-title="false"  show-confirm-button show-cancel-button cancel-color confirm-color @confirm="confirm_is_hotShow">
			<view class="py-3">
				<view class="text-center">你确定要把选中的商品{{items.is_hot?'取消':'设置'}}热销吗?</view>
			</view>
		</u-modal>
		<!-- 精品 -->
		<u-modal v-model="is_bestShow" title="提示" show-title="false"  show-confirm-button show-cancel-button cancel-color confirm-color @confirm="confirm_is_bestShow">
			<view class="py-3">
				<view class="text-center">你确定要把选中的商品{{items.is_best?'取消':'设置'}}精品吗?</view>
			</view>
		</u-modal>
		<!-- 上架 -->
		<u-modal v-model="getupShow" title="上架提示" show-title="false"  show-confirm-button show-cancel-button cancel-color confirm-color @confirm="getupFarme">
			<view class="py-3">
				<view class="text-center">你确定要把该商品上架吗?</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import Sale from "../conponents/virtual/sale.vue";
	import Shelve from "../conponents/virtual/shelve.vue";
	import Audit from "../conponents/virtual/audit.vue";
	import Under from "../conponents/virtual/under.vue";
	import sPopup from '../../components/s-popup/index.vue';
	const SIZE = 10
	export default {
		components:{
			Sale, // 在售
			Shelve, // 下架
			Audit, // 待审核
			Under, // 审核失败
			sPopup // 弹框
		},
		data() {
			return {
				list:[
					{todat_id:1,name:"在售"},
					{todat_id:2,name:"下架"},
					{todat_id:3,name:"待审核"},
					{todat_id:4,name:"审核失败"}
				],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				scrollHeight:0,
				
				goods_show:true, // 在售商品的标识符
				firstFocus:false,
				saleList:[], // 在售列表
				underList:[], // 下架
				auditList:[], // 待审核
				shelveList:[] ,// 审核失败
				items:"",	// 当前数据列表
				changePrice:"", // 改价调整价格
				mouseShow:false,// 改价
				downShow:false,// 下架
				weightShow:false,// 智能权重
				weightList:"",	// 智能权重列表
				interfere:"", // 人工干预值
				moreShow:false,// 更多
				recycleShow:false, // 商品移至回收站
				shareShow:false, // 分享
				is_newShow:false, // 新品
				is_hotShow:false, // 热销
				is_bestShow:false, // 精品
				goods_id:"",
				getupShow:false, // 上架
				delShow:false, // 删除
				mouse_img:"", // 改价的图片
				more:1, // 第几页
				count:10, // 条数
				total:0, // 总页数
				u_loadmore:true, // 加载中
				
				triggered: false, // 下拉刷新
			}
		},
		computed:{
			// 更新列表
			updataList(){
				if(this.swiperCurrent==0){
					this.$H.post("v2/store/virtual/goods/list",{
						list_type:"selling",
						pagination:{
							count:this.count,
							page:this.more
						},
						}).then(res=>{
						this.saleList=res.data
					})
				}else if(this.swiperCurrent==1){
					this.$H.post("v2/store/virtual/goods/list",{
						list_type:"offsale",
						}).then(res=>{
						this.underList=res.data
					})
				}else if(this.swiperCurrent==2){
					this.$H.post("v2/store/virtual/goods/list",{
						list_type:"await_check",
						}).then(res=>{
						this.auditList=res.data
					})
				}else if(this.swiperCurrent==3){
					this.$H.post("v2/store/virtual/goods/list",{
						list_type:"check_refused",
						}).then(res=>{
						this.shelveList=res.data
					})
				}
			},
		},
		onReady() {
			let _this=this
			uni.getSystemInfo({
				success(resu) {
					const query = uni.createSelectorQuery()
					query.select('.sale_header').boundingClientRect()
					query.exec(function(res) {
						_this.scrollHeight = resu.windowHeight - res[0].bottom+ 'px';
					})
				}
			})
		},
		onLoad(e) {
			this.$H.post("v2/store/virtual/goods/list",{
				list_type:"selling",
				pagination:{
					count:this.count,
					more:this.more
				},
				}).then(res=>{
					this.u_loadmore=false 
					this.saleList=res.data
					this.total=res.paginated.total
			})
			
			// 下拉刷新
			this._freshing = false;
		},
		onShow() {
			this.$H.post("v2/store/virtual/goods/list",{
				list_type:"selling",
				pagination:{
					count:this.count,
					more:this.more
				}
			}).then(res=>{
				this.saleList=res.data
			})
		},
		methods: {
			// 下拉刷新 自定义下拉刷新控件被下拉
			onPulling(e) {
			    console.log("onpulling", e);
				this.triggered = true;
			},
			// 自定义下拉刷新被触发
			onRefresh() {
			    if (this._freshing) return;
			    this._freshing = true;
			    setTimeout(() => {
			       this.updata()
				   this.triggered = false;
				   this._freshing = false;
			    }, 1000)
			},
			// 自定义下拉刷新被复位
			onRestore() {
			    this.triggered = 'restore'; // 需要重置
			    console.log("onRestore");
			},
			// 更新列表
			updata(){
				if(this.swiperCurrent==0){
					this.$H.post("v2/store/virtual/goods/list",{
						list_type:"selling",
						pagination:{
							count:this.count,
							page:this.more
						},
						}).then(res=>{
						this.saleList=res.data
					})
				}else if(this.swiperCurrent==1){
					this.$H.post("v2/store/virtual/goods/list",{
						list_type:"offsale",
						}).then(res=>{
						this.underList=res.data
					})
				}else if(this.swiperCurrent==2){
					this.$H.post("v2/store/virtual/goods/list",{
						list_type:"await_check",
						}).then(res=>{
						this.auditList=res.data
					})
				}else if(this.swiperCurrent==3){
					this.$H.post("v2/store/virtual/goods/list",{
						list_type:"check_refused",
						}).then(res=>{
						this.shelveList=res.data
					})
				}
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// 上拉加载数据
			getData(){
				this.$H.post("v2/store/virtual/goods/list",{
					list_type:"selling",
					pagination:{
						count:this.count,
						page:this.more
					}
				}).then(res=>{
					this.saleList=res.data
				})
			},
			// 搜索
			sendSeach(){
				uni.navigateTo({
					url:"/pages/goods-seach/goods-seach?goods_show="+JSON.stringify(this.goods_show)
				})
			},
			
			// 商品详情
			goodsDetail(item){
				uni.navigateTo({
					url:"/pagesA/virtual/virtual-detail?goods_id="+item.goods_id
				})
			},
			// 操作按钮
			goodsOpen(goodsItem,item){
				this.items=item
				if(goodsItem.title=='改价'){
					this.mouseShow=true
					this.mouse_img=item.img.url
				}else if(goodsItem.title=='下架'){
					this.downShow=true
				}else if(goodsItem.title=="虚拟卡"){
					uni.navigateTo({
						url:"/pagesA/virtual/virtual-card-list?goods_id="+item.goods_id
					})
				}else if(goodsItem.title=="补卡"){
					uni.navigateTo({
						url:"/pagesA/virtual/virtual-add-card?goods_id="+item.goods_id
					})
				}else if(goodsItem.title=='智能权重'){
					this.$H.post("admin/merchant/goods/intelligentWeight",{goods_id:item.goods_id}).then(res=>{
						this.weightList=res.data
					})
					this.weightShow=true
				}else if(goodsItem.title=='更多'){
					this.moreShow=true
				}
			},
			
			// 调整价钱输入框
			changeInput(e){
				  this.changePrice=e.detail.value
				  console.log(e)
			},
			// 确认修改
			ConfirmPrice(){
				this.$H.post("admin/merchant/goods/price/updateShopPrice",{goods_id:this.items.goods_id,price:this.changePrice}).then(res=>{
					console.log(res)
					this.mouseShow=false
					this.updata()
				})
			},
			// 改价 弹框聚焦
			change_input(e){
				console.log(e)
				this.firstFocus=true
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
			},
			// 关闭弹框
			close_focus(){
				this.firstFocus=false
			},
			open_focus(){
				this.change_input()
			},
			// 高级改价
			expert(){
				this.mouseShow=false
				uni.navigateTo({
					url:"/pages/goods-edit-expert/goods-edit-expert?goods_id="+this.items.goods_id
				})
			},
			// 下架
			downFarme(){
				this.$H.post("admin/goods/toggle/sale",{id:this.items.goods_id,type:'offline'}).then(res=>{
					console.log(res)
					this.updata()
				})
			},
			// 智能权重 人工干预值
			weight(){
				this.$H.post("admin/merchant/goods/sort/update",{goods_id:this.items.goods_id,sort_order:this.interfere}).then(res=>{
					console.log(res)
					this.updata()
				})
			},
			// 监听人工干预值框
			interfereInput(e){
				this.interfere=e.detail.value
			},
			// 商品移至回收站
			goods_recycle(){
				this.delShow=true
				this.moreShow=false
			},
			// 确认移至回收站
			confirm_delShow(){
				this.$H.post("v2/store/virtual/goods/trash",{id:this.items.goods_id}).then(res=>{
					this.updata()
				})
			},
			// 分享
			share(){
				this.shareShow=true
				this.moreShow=false
			},
			// 取消分享
			cancelShare(){
				this.shareShow=false
			},
			// 关闭更多
			cancelMore(){
				this.moreShow=false
				
			},
			// 设置 新品
			is_new(){
				this.is_newShow=true
				this.moreShow=false
			},
			confirm_is_new(){
				if(this.items.is_new==0){
					this.$H.post("admin/goods/toggle/suggest",{id:this.items.goods_id,type:'new',is_suggest:1}).then(res=>{
						console.log(res)
						this.updata()
					})
					
				}else{
					this.$H.post("admin/goods/toggle/suggest",{id:this.items.goods_id,type:'new',is_suggest:0}).then(res=>{
						console.log(res)
						this.updata()
					})
				}
			},
			// 设置热销 
			is_hot(){
				this.is_hotShow=true
				this.moreShow=false
			},
			confirm_is_hotShow(){
				if(this.items.is_hot==0){
					this.$H.post("admin/goods/toggle/suggest",{id:this.items.goods_id,type:'hot',is_suggest:1}).then(res=>{
						console.log(res)
						this.updata()
					})
				}else{
					this.$H.post("admin/goods/toggle/suggest",{id:this.items.goods_id,type:'hot',is_suggest:0}).then(res=>{
						console.log(res)
						this.updata()
					})
				}
			},
			// 设置精品
			is_best(){
				this.is_bestShow=true
				this.moreShow=false
			},
			confirm_is_bestShow(){
				if(this.items.is_best==0){
					this.$H.post("admin/goods/toggle/suggest",{id:this.items.goods_id,type:'best',is_suggest:1}).then(res=>{
						console.log(res)
						this.updata()
					})
				}else{
					this.$H.post("admin/goods/toggle/suggest",{id:this.items.goods_id,type:'best',is_suggest:0}).then(res=>{
						console.log(res)
						this.updata()
					})
				}	
			},
			// 上架商品
			goods_under(underItem,under){
				this.items=under
				console.log(underItem,under)
				if(underItem.title=="上架"){
					this.getupShow=true
				}else if(underItem.title=="虚拟卡"){
					uni.navigateTo({
						url:"/pagesA/virtual/virtual-card-list?goods_id="+under.goods_id
					})
				}else if(underItem.title=="补卡"){
					uni.navigateTo({
						url:"/pagesA/virtual/virtual-add-card?goods_id="+under.goods_id
					})
				}else if(underItem.title=="更多"){
					this.moreShow=true
				}
			},
			// 确认上架
			getupFarme(){
				this.$H.post("admin/goods/toggle/sale",{id:this.items.goods_id,type:'online'}).then(res=>{
					console.log(res)
					this.updata()
				})
			},
			// 待审核
			goods_audit(goodsItem,item){
				this.items=item
				if(goodsItem.title=="删除"){
					this.delShow=true
				}
			},
			// 审核失败 
			goods_shelve(goodsItem,item){
				this.items=item
				if(goodsItem.title=="删除"){
					this.delShow=true
				}
			},
			// 上拉加载函数
			scrolltolower(){
			    let that = this
			    // 每次上拉加载的数据比上一次多十个
			    that.count += SIZE
				if(that.saleList.length==that.total){
					return
				}else{
					setTimeout(()=>{
					    that.getData()
					},1000)
				}
			}
		}
	}
</script>

<style>
	.active_today{
		color: #ff0000;
		border-bottom: 5rpx solid #ff0000;
	}
	.user_img{
		width: 50upx;
		height: 50upx;
		background-color: #ffd1d0;
	}
	.today_title{
		background-color: #f6efef;
	}
	.today_hot{
		width: 150upx;
		height: 150upx;
	}
	
	.goods_img{
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
	}
	.goods_card_head_left{
		width: 200upx;
		height:200upx;
	}
	.goods_card_head_left image{
		width: 200upx;
		height:200upx;
		border-radius: 20upx;
	}
	.goods_card_head_right image{
		width: 30upx;
		height: 30upx;
	}
	.goods_card_content_footer view{
		border: 1px solid #808080;
		box-sizing: border-box;
		width: 120upx;
		height: 59upx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 10upx;
		border-radius: 30upx;
	}
	.popupImg{
		width: 170upx;
		height: 170upx;
		border-radius: 20upx;
	}
	.deep /deep/ button{
		width: 70%;
		border-radius: 50upx;
		font-size: 30upx;
		background: linear-gradient(to right,#F31E3E,#FB4F37);
	}
	
	.goods_icon{
		width: 30upx;
		height: 30upx;
	}
	
	.s-popup-mask{
		background: rgba(0,0,0,0.2)!important;
	}
	.content{
		background-color:rgba(255,255,255,0.96)!important;
		color: #666666;
	}
	.s-popup-wrap{
		background: rgba(204,204,204,0)!important;
	}
	.icon_share view{
		color: #888;
	}
	.icon_share image{
		width: 120upx;
		height: 120upx;
	}
	.nowrap{
		white-space:nowrap;
	}
</style>
